<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta charset="UTF-8">
<title>主页面</title>
<link rel="stylesheet" href="../css/base.css">

<style>
html, body, main {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

main {
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 50px auto;
	grid-template-areas: "header header" "nav article"
}

header {
	grid-area: header;
	border: 1px solid #ccc
}

nav {
	grid-area: nav;
	border: 1px solid #ccc
}

article {
	grid-area: article;
	border: 1px solid #ccc;
}

section {
	height: 100%;
}

#leftMenu {
	padding: 0px;
}

.leftMenuLi1 {
	list-style: none;
	border: 1px #ccc solid;
	margin: 2px 10px 1px;
	padding-left: 0.5rem;
	font: bold 1.2rem/1.8rem '宋体';
	height: 2rem;
	background-image: -webkit-linear-gradient(top, #ccc, white);
}

#leftSubMenu {
	padding-left: 0.8rem;
}

.leftMenuLi2 {
	list-style: none;
	border: 1px #ccc solid;
	cursor: pointer;
	margin-right: 10px;
	margin-bottom: 2px;
	padding-left: 20px;
}

.leftMenuLi1_image {
	width: 16px;
	height: 17px;
	float: right;
	margin-right: 8px;
	margin-top: 4px;
	background-repeat: no-repeat;
	background-size: 450px 450px;
	background-position: -72px -361px;
	cursor: pointer;
}

iframe {
	border: 0px;
	width: 100%;
	height: 99%
}

ul a:link, ul a:hover, ul a:active, ul a:visited {
	text-decoration: none;
	color: black;
	cursor: pointer;
}
</style>
</head>
<body>
	<main> <header>logo</header>
	<nav>
		<h2 style="text-align: center">管理菜单</h2>
		<div style="text-align: center">
			<a href="user.servlet?param=init" target="mainPage">用户信息管理</a><br>
			<a href="article.servlet" target="mainPage">写文章</a><br> <a
				href="articleType.servlet" target="mainPage">文章类型</a>
		</div>
		<h2 style="text-align: center">文章类型</h2>
		<ul id="leftMenu">
			<c:forEach items="${requestScope.parentTypes}" var="articleType">
				<li class="leftMenuLi1">${articleType.name}<div
						class="leftMenuLi1_image"></div></li>
				<ul id="leftSubMenu">
					<c:forEach items="${articleType.subArticleTypes}"
						var="subArticleType">
						<li class="leftMenuLi2"><a class="navigate" target="mainPage"
							href="${subArticleType.url}${subArticleType.id}">${subArticleType.name}</a>
						</li>
					</c:forEach>
				</ul>
			</c:forEach>
		</ul>
	</nav>
	<article style="background-image: url('img/misaka002.jpg')">
		<section>
			<iframe name="mainPage" src="views/welcome.jsp"></iframe>
		</section>
	</article>
	</main>
</body>
</html>